<template>
	<view>
		<view class="comment">
			<view class="comment-title">
				共有{{count}}条，综合评分{{average}}分
			</view>
			<view v-if="conmentList== ''" class="">
				<u-empty text="评论为空" mode="message"></u-empty>
			</view>
			
			<uni-card v-for="(item,index) in conmentList" :key="index">
				<template v-slot:actions>
					<view class="card-actions">
						<view class="com-top">
							<view class="top-left">
								<!-- view class="left-avatar">
									<image :src="item.avatar" mode=""></image>
								</view> -->
								<view class="left-right">
									<view class="right-name">
										{{item.nickname}}
									</view>
									<view class="right-date">
										{{item.createtime | dateFormat}}
									</view>
								</view>
							</view>
							<view class="top-right">
								<u-rate :count="rataCount" v-model="rate"></u-rate>
							</view>
						</view>
						<view class="line">
							<u-line color="red" />
						</view>
						
						<view class="com-content">
							{{item.comment}}
						</view>
					</view>
				</template>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: 1,
				conmentList: [],
				count: 0,
				average: 0,
				rate: 5,
				rataCount: 5,
			};
		},
		onLoad(item) {
			this.productId = item.id
			this.getCommentList()
		},
		methods: {
			getCommentList() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/Hire/getCommentList',
					method: 'POST',
					data: {
						hireid: this.productId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.conmentList= res.data.data.res
						this.count = res.data.data.count
						this.average = res.data.data.average
					}
				})
			},
		},
		filters: {
			dateFormat: function(val) {// 格式化时间
				const dt = new Date(val*1000)
				const y = dt.getFullYear()
				const m = dt.getMonth() +1
				const d = dt.getDate()
				const hh = dt.getHours()
				const mm = dt.getMinutes()
				 
				return `${y}-${m}-${d} ${hh}:${mm}`
			},
		}
	}
</script>

<style lang="scss">
.comment{
	.comment-title {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 20px;
		text-align: center;
		background-color: #fff;
	}
	.content-top {
		margin-top: 20rpx;
		display: flex;
		.top-right {
			margin-left: 10rpx;
			font-size: 16px;
		}
	}
	.content-cot {
		padding: 10rpx;
	}
}
.card-actions{
	.com-top {
		display: flex;
		justify-content: space-between;
		.top-left {
			height: 100rpx;
			display: flex;
			.left-avatar {
				width: 100rpx;
				height: 100rpx;
				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.left-right {
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.right-name {
					font-size: 1.1rem;
					color: black;
				}
				.right-date {
					font-size: 1rem;
					color: #d9d9d9
				}
			}
		}
		.top-right{
			height: 100rpx;
			line-height: 100rpx;
		}
	}
	.line {
		margin-top: 20rpx;
	}
	.com-content {
		margin-top: 30rpx;
		font-size: 1rem;
	}
}
</style>
